<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>商品列表 - WMS库存管理系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">
<div class="layui-body" style="padding:15px;">
   <!-- <fieldset class="layui-elem-field">
        <legend>按条件查看</legend>
        <div class="layui-field-box">
            <form class="layui-form layui-form-pane1" method="get" >
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="start"   placeholder="开始日期" autocomplete="off" class="layui-input" id="startTime">
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="end"   placeholder="结束日期"  autocomplete="off" class="layui-input" id="endTime">
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn">查看</button>
                    </div>


                </div>

            </form>
        </div>-->
    <style>
        #sales,
        #like {
            margin: 50px 100px;
        }

        .flex-box {
            display: flex;
        }

        .flex-box h2 {
            font-size: 18px;
            margin-top: 30px;
            color: #cc4637;
            text-align: center;
            font-weight: bold;
        }
    </style>
    <div class="layui-body" style="padding:15px;">
        <div class="layui-tab layui-tab-brief" lay-filter="demo">
            <ul class="layui-tab-title">
                <li class="layui-this">抖店订单数据</li>
            </ul>
        </div>
        <div id="main" style="width: 1500px;height:700px;"></div>

    </div>
    <script  type="text/javascript" src="/sb/dsfsadf.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        let allData = [] // 用于储存数据

        // 指定图表的配置项和数据
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '订单数'],
                source: [
                    // ['2021/4/5', 13, 20, 30],

                ]
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{
                type: 'bar',
                color: "#f7b00b",
                barMaxWidth: 30
            }/*, {
                type: 'bar',
                color: "#f59c9c",
                barMaxWidth: 30
            },{
                type: 'bar',
                color: "#54c0eb",
                barMaxWidth: 30
            }*/]
        };
        var reqData = {start:$('#startTime').val(),end:$('#endTime').val()};
        $.ajax({
            url:'/ajax_order/douyin_order_sales_view',
            type:'POST',
            dataType:'json',
            contentType: 'application/json',
            data:JSON.stringify(reqData),
            success:function(res){
                if(res.code==0){
                    res.data.forEach(i => {
                        let arr = [i.orderDate, i.orderCount] // 对应的数据
                        allData.push({
                            arr
                        })
                    })
                    let barData = allData.map(i => i.arr) // 过滤后的柱形数据
                    console.log(barData);
                    option.dataset.source = barData
                    myChart.setOption(option);
                }
            }
        });


    </script>
</div>
</body>
</html>
